<template>
	<view>
		
		<view class="menu-content">
			<uni-grid :column="3" :showBorder="false"  :square="false">
				<uni-grid-item  @tap.click='switchCate(0)'>
					<view class="menu-li-content">
						<view class="menu-button" :class="isActive == 0 ? 'active' : ''">
							<text>全部</text>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item v-for="menu in menuList" :key="menu.id" @tap.click='switchCate(menu.id)'>
					<view class="menu-li-content">
						<view class="menu-button" :class="isActive == menu.id ? 'active' : ''">
							<text>{{menu.title}}</text>
						</view>
					</view>
				</uni-grid-item>
				
			</uni-grid>
		</view>
		
		<view class="detail">
			<view class="detail-content">
				<view class="" v-for="detail in detailList" :key="detail">
					<image class="detail-content-img" v-for="(item,index) in detail.describe1" :key="item" :src="item" mode="widthFix" @longpress.stop="showImg(item)"></image>
					<!-- <rich-text :nodes="detail.describe"></rich-text> -->
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				pid: 0,
				src: '/static/images/swiper.png',
				menuList: [],
				detailList: [],
				tuijian: '',
				title:'',
				openid: ''
			}
		},
		onLoad(option) {
			let _this = this
			if(option.salesman_code){
				_this.tuijian = decodeURIComponent(option.salesman_code)
				uni.setStorageSync('salesman_code', _this.tuijian)
			}
			_this.tuijian = uni.getStorageSync('salesman_code');
			_this.pid = option.pid
			_this.isActive = option.id ? option.id : 0
			_this.$nextTick(function () {
				if(_this.checkLogin()){
					_this.openid = uni.getStorageSync('openid');
					_this.getProList()
				}
			})
		},
		methods: {
			showImg(img){
				uni.showModal({
					title: '保存图片',
					content: '是否保存当前图片？',
					success:  (res)=> {
						if (res.confirm) {
							let date = new Date();
							let fileName = date.getTime();
							uni.downloadFile({
								url: img,
								filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg',
								success: (res) =>{
									console.log(res)
									let filePath = res.filePath;
									if (res.statusCode === 200){
										uni.saveImageToPhotosAlbum({
											filePath: filePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													duration: 2000
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败，请稍后重试",
													icon: "none"
												});
											}
										});
										// let fileMgr = wx.getFileSystemManager();
										// fileMgr.unlink({
										// 	filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg',
										// 	success: function (r) {
										// 	},
										// })
									}
								}
							})
						} else if (res.cancel) {
							// uni.showToast({
							// 	title: "你取消了该操作",
							// 	icon:'none',
							// 	duration: 2000
							// });
						}
					}
				});
			},
			hidePhoto(){
				this.isShowPhoto = false;
				uni.showToast({
					title:'隐藏',
					icon:'none'
				})
			},
			onShareAppMessage(res) {
				//发送给朋友
				let _this = this
			    return {
			      title: _this.title,
			      path: '/pages/product/index?pid=' + _this.pid + '&salesman_code=' + _this.tuijian
			    }
			},
			onShareTimeline(res){ 
				// 分享到朋友圈
				let _this = this
				return {
					title: _this.title,
					path: '/pages/product/index?pid=' + _this.pid + '&salesman_code=' + _this.tuijian
				}
			},
			getProList() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/details?pid=' + _this.pid + '&id=' + _this.isActive,
					method: 'GET'
				}).then(res=>{
					_this.menuList = res.list
					_this.detailList = res.info
					_this.title = res.title
					uni.setNavigationBarTitle({
						title: res.title
					})
				})
			}
			,switchCate(id) {
				this.isActive = id
				this.getProList()
			}
		}
	}
</script>

<style>

.menu-content{
	width: 100%;
	padding-top: 20rpx;
}
.menu-li-content{
	width: 100%;
	height: 100rpx;
	text-align: center;
}
.menu-button{
	width: 80%;
	height: 80rpx;
	font-size: 30rpx;
	font-weight: 700;
	line-height: 80rpx;
	color: #FFFFFF;
	position: relative;
	top: 10rpx;
	left: 10%;
	background-color: #B6B6B6;
	border-radius: 10rpx;
	letter-spacing: 10rpx;
}
.active{
	background-color: #4DC269;
}
.detail{
	width: 100%;
	margin-top: 20rpx;
}
.detail-content{
	padding: 20rpx;
}
.detail-content-img{
	width: 100%;
	height: auto;
}

</style>
